<template>
  <div class="grade-temp">
    <el-row style="margin-bottom:20px;" :gutter="20">
      <el-col :span="6">
        <span style="font-size:14px;">{{$t('qualityCheck.quality')}}</span>
      </el-col>
      <el-col :span="6">
        <span style="font-size:14px;">{{$t('qualityCheck.qualityResult')}}</span>
      </el-col>
      <el-col :span="12">
        <el-checkbox style="margin: 0 10px 0 30px;" @change="gradeTypeChange" v-model="gradeType">{{$t('qualityCheck.simpleGradeType')}}</el-checkbox>
        <el-tooltip class="item" effect="dark" :content="$t('qualityCheck.simpleGradeTip')" placement="right">
          <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-form :model="form" ref="form">
      <el-row :gutter="20" v-for="(item, index) in configList" class="row" :key="index">
        <el-col :span="6" v-if="!item.fatal">
          <div style="padding-top: 4px;">
            {{item.name}}
          </div>
        </el-col>
        <el-col :span="6" v-else>
          <div style="padding-top: 4px;">
            {{item.name}}
            <el-tooltip class="item" effect="dark" placement="right">
              <div slot="content">
                {{$t('qualityCheck.importTip')}}
              </div>
              <i class="iconfont icon-tixingweizhi"></i>
            </el-tooltip>
          </div>
        </el-col>
        <el-col v-show="!gradeType" :span="12" class="middle" style="padding-right:14px;">
          <el-form-item
            :prop="item.order + '_' + item.fatal + '_' + item.weight"
            :rules="rules"
            style="margin-top: -16px;"
            >
            <el-input style="margin-left: 8px;" size="mini" :placeholder="$t('public.pleaseEnterScore')" v-model="form[item.order + '_' + item.fatal + '_' + item.weight]" auto-complete="off" :disabled="gradeType === true">
              <span slot="prepend" class="percentageb">{{item.weight}}%</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="gradeType === true">
          <el-form-item style="margin-top: -6px;" :rules="rules">
            <el-input size="mini" :placeholder="$t('public.pleaseEnterScore')" v-model="simpleForm[item.order + '_' + item.fatal + '_' + item.weight]">
              <span slot="prepend" class="percentageb">{{item.weight}}</span>
            </el-input>
          </el-form-item>
          <!--{{$t('qualityCheck.maxGrade')}}-->
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="50">
      <el-col :span="6">
        {{$t('qualityCheck.allGrade')}}
      </el-col>
      <el-col :span="18">
        <span style="font-size:16px;color: #ff6b6b;">{{gradeObj.grade}}</span>
      </el-col>
    </el-row>
    <!--<textarea class="chat_info_li_remarks" rows="3" :placeholder="$t('public.pleaseEnter')" v-model.trim="gradeObj.COMMENT"></textarea>-->
    <!--<div class="scoring">-->
    <!--<el-button class="primary_btn fl" @click="nextGrade" v-if="passBtn">{{$t('qualityCheck.passNext')}}</el-button>-->
    <!--<el-button type="primary" class="primary_btn fr save" @click="save">{{saveBtn}}</el-button>-->
    <!--<el-button class="primary_btn fr" @click="off">{{$t('public.colse')}}</el-button>-->
    <!--</div>-->
  </div>
</template>
<script>
//  import {deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'gradeTemp',
    data () {
      let validate1 = (rule, value, callback) => {
        if (!/^\d+$/.test(value)) {
          callback(new Error(this.$t('qualityCheck.gradeParamError2')))
        } else if (parseInt(value) > 100) {
          callback(new Error(this.$t('qualityCheck.gradeParamError3')))
        } else {
          callback()
        }
      }
      return {
        gradeType: false,
        validate: validate1,
        rules: [
          {required: true, message: this.$t('validate.required')},
          {validator: validate1, trigger: 'blur'}
        ]
      }
    },
    props: {
      configList: Array,
      form: Object,
      configListFormDeepClone: Object,
      simpleForm: Object,
      gradeObj: Object,
      saveBtn: {type: String, default: ''},
      passBtn: {type: Boolean, default: true},
    },
    computed: {
    },
    watch: {
      form: {
        deep: true,
        handler: function (newV) {
          let self = this
          self.gradeObj.grade = 0
          for (let i in self.form) {
            let arr = i.split('_')
            if (arr[1] === 'true') {
              if (self.form[i] < 60) {
                self.gradeObj.grade = 0
                return
              }
            }
            let num = parseInt(self.form[i]) * parseInt(arr[2]) / 100
            if (!num) {
              num = 0
            }
            self.gradeObj.grade += num
          }
          if (!self.gradeObj.grade) {
            self.gradeObj.grade = 0
          } else if (self.gradeObj.grade > 0) {
            self.gradeObj.grade = parseFloat(self.gradeObj.grade.toFixed(1))
          }
        }
      },
      simpleForm: {
        deep: true,
        handler: function () {
          let self = this
          self.gradeObj.grade = 0
          for (let i in self.simpleForm) {
            let arr = i.split('_')
            if (arr[1] === 'true') {
              if (Number(self.simpleForm[i]) < (Number(arr[2])*60)/100) {
                self.gradeObj.grade = 0
                return
              }
            }
            if (Number(self.simpleForm[i]) > Number(arr[2]) || Number(self.simpleForm[i]) < 0) {
              this.$message.error(`当前项最大输入值为${arr[2]}`)
              self.simpleForm[i] = Number(arr[2])
            }
            if(self.simpleForm[i].toString().indexOf(".")>-1 && self.simpleForm[i].toString().split(".")[1].length>1) {
              // const temN = parseFloat((Number(self.simpleForm[i])*100/100).toFixed(1))
              const temN = (parseFloat(self.simpleForm[i])*100/100).toFixed(2).slice(0, -1)
              this.$set(self.simpleForm, i, Number(temN))
              this.$message.error(`简单评分支持一位小数`)
            }
            let num = parseFloat(Number(self.simpleForm[i]).toFixed(1))
            if (!num) {
              num = 0
            }
            self.gradeObj.grade += num
          }
          if (!self.gradeObj.grade) {
            self.gradeObj.grade = 0
          } else if (self.gradeObj.grade > 0) {
            self.gradeObj.grade = parseFloat(self.gradeObj.grade.toFixed(1))
          }
//           for (let item in self.form) {
//             let arr = item.split('_')
//             if (this.gradeType === true) {
//               if (self.simpleForm[item] !== '') {
//                 let gradeNum = parseInt(self.simpleForm[item] * 100 / parseInt(arr[2]))
//                 if (isNaN(gradeNum)) {
//                   gradeNum = '请输入数字'
//                 }
//                 self.$set(self.form, item, gradeNum)
//               } else {
// //                  不能为空
//                 self.$set(self.form, item, this.configListFormDeepClone[item])
//               }
//             }
//           }
        }
      },
    },
    methods: {
      gradeTypeChange () {
        let data = {
          _id: this.$store.state.session.user._id,
          gradeType: this.gradeType
        }
        this.$store.dispatch('updateUser', data).then((res) => {
          if (res && res.success) {
          }
        })
        if (this.gradeType) {
          for (let item in this.simpleForm) {
            let arr = item.split('_')
            this.simpleForm[item] = Number(arr[2])
          }
        } else {
          for (let item in this.form) {
            this.form[item] = 100
          }
        }
        this.gradeObj.grade = 100
      },
      off () {
        this.$emit('off')
      },
      nextGrade () {
        this.$emit('nextGrade')
      },
      save () {
        if (this.gradeType) {
          let flag = false
          for (let i in this.simpleForm) {
            let arr = i.split('_')
            let num = parseFloat(Number(this.simpleForm[i]).toFixed(1))
            if (this.simpleForm[i] === '') {
              flag = true
            }
            if (!num && num !== 0) {
              flag = true
              num = 0
            }
            this.gradeObj.obj[arr[0]] = num
          }
          if (flag) {
            this.$message.error(this.$t('qualityCheck.noQualityResult'))
            return
          }
          if (this.gradeObj.grade > 100) {
            this.$message.error(this.$t('qualityCheck.totalMaxGrade'))
            return
          }
          this.gradeObj.gradeType = true
          console.log(this.gradeObj)
          this.$emit('save', this.gradeObj)
        } else {
          this.$refs.form.validate((valid) => {
            if (valid) {
              for (let i in this.form) {
                let arr = i.split('_')
                let num = parseInt(this.form[i]) * parseInt(arr[2]) / 100
                this.gradeObj.obj[arr[0]] = num
              }
              this.gradeObj.gradeType = false
              console.log(this.gradeObj)
              this.$emit('save', this.gradeObj)
            } else {
              this.$message.error(this.$t('qualityCheck.noQualityResult'))
            }
          })
        }
      }
    },
    beforeMount () {
      this.gradeType = this.$store.state.session.user.gradeType || false
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .grade-temp
    color $cf-gray2
  .icon-tixingweizhi
    display inline-block
    font-size 12px
    color $c-main
    line-height 14px
    height 14px
    width 14px
    text-align center
    border-radius 50%
    border 1px solid $c-main
  .scoring
    text-align center
    color $cf-white
    margin-top 40px
    span
     display inline-block
     padding 10px 26px
     border-radius 4px
     cursor pointer
  .save
    margin-left 40px
  .el-row
    margin-top 12px
    .el-col-7
    .el-col-11
      line-height 36px
    .el-col-13
      line-height 36px
  .chat_info_li_remarks
    resize none
    font-size 12px
    box-sizing border-box
    width 100%
    margin-top 6px
    border-radius 4px
    padding 6px 10px
    border 1px solid $c-border2
  .middle
    margin-top 10px
  .el-row
    margin-top 2px
</style>
